<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import Select from './Select.vue';

const router = useRouter();
const userLogin = () => {
  router.push('/login');
};
const ykLogin = () => {
  router.push({ path: 'home', query: { message: '游客登录成功' } });
};

const input = ref('');
</script>

<template>
  <div class="header">
    <div>
      <div class="h-logo">
        <img src="@/assets/sim1.svg" alt="" />
      </div>
    </div>
    <div>
      <svg>
        <text x="0" y="80px">新一代智慧学习平台</text>
      </svg>
    </div>
    <div>
      <Select />
    </div>
    <div id="btn">
      <button class="button" @click="userLogin">用户登录</button>
      <button class="button" @click="ykLogin" style="background-color: #659264">游客登录</button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 80px;
  display: flex;
  @include flex();
  div:nth-child(1) {
    width: 10vw;
  }

  div:nth-child(2) {
    @include flex();
    width: 25vw;
  }

  div:nth-child(3) {
    @include flex(flex-end);
    width: 40vw;
  }

  div:nth-child(4) {
    width: 25vw;
  }

  .h-logo {
    width: 50px;
    height: 50px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  #btn {
    @include flex();
    button:nth-child(1) {
      width: 100px;
      height: 34px;
      border-radius: 20px;
    }
    button:nth-child(2) {
      width: 100px;
      height: 34px;
      position: relative;
      z-index: 1;
      transition: all 250ms;
      overflow: hidden;
      border-radius: 20px;
      //   background: linear-gradient(25deg, #ffa337,#ffffff);
      background-color: #ffa337 !important;
    }
  }
}

svg {
  width: 100%;
  height: 100%;
  font-size: 25px;
}

svg text {
  stroke: #433a8f;
  stroke: $theme-color;
  stroke-dashoffset: 100%;
  dominant-baseline: middle;
  stroke-dasharray: 100%;
  animation-delay: 2s;
  animation: animae linear 5s forwards infinite;
}

@keyframes animae {
  0% {
    stroke-dashoffset: 100%;
    fill: transparent;
  }

  100% {
    stroke-dashoffset: 0;
    fill: $theme-color;
  }
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #41b883;
  z-index: -1;
  transition: all 250ms;
}

button:hover::before {
  width: 100%;
}
</style>
